<template>
  <div class="pagination">
    <button class="pagination__btn" @click="prev" :disabled="myCurrentPage < 2">
      <span class="iconfont icon-arrow-left"></span>
    </button>
    <ul class="pagination__pager">
      <li
        :class="{
          'pagination__pager-number': true,
          active: myCurrentPage === 1,
        }"
        @click="goPage(1)"
      >
        1
      </li>
      <!-- totalPages <= 7 -->
      <li class="pagination__pager-number" v-show="startEnd.start > 2">...</li>
      <!-- 
        v-for 可以遍历数字 注意key不可以用index和num  因为会变  如果3那么给key就应该是3 性能是最好的
        在没有考虑场景五的时候 因为 total= 0 那么(startEnd.end - startEnd.start + 1)为负数 所以报错( Invalid array length) 应该为0 不显示中间按钮
      -->
      <li
        v-for="(num, index) in startEnd.end - startEnd.start + 1"
        :key="startEnd.end + index"
        @click="goPage(startEnd.start + index)"
        :class="{
          'pagination__pager-number': true,
          active: myCurrentPage === startEnd.start + index,
        }"
      >
        {{ startEnd.start + index }}
      </li>
      <li
        class="pagination__pager-number"
        v-show="startEnd.end < totalPages - 1 && totalPages > 7"
      >
        ...
      </li>
      <li
        :class="{
          'pagination__pager-number': true,
          'pagination__pager-number_last': true,
          active: myCurrentPage === totalPages,
        }"
        @click="goPage(totalPages)"
        v-if="totalPages >= 2"
      >
        {{ totalPages }}
      </li>
    </ul>
    <button
      class="pagination__btn"
      @click="next"
      :disabled="myCurrentPage > totalPages - 1"
    >
      <span class="iconfont icon-arrow-right"></span>
    </button>
    <select class="pagination__pagesize" v-model="myPageSize">
      <option
        :value="pageSize"
        v-for="(pageSize, index) in pageSizes"
        :key="index"
      >
        每页{{ pageSize }}条
      </option>
    </select>
    <span class="pagination__total">共{{ total }}条</span>
  </div>
</template>

<script>
export default {
  name: "XPagination",
  props: {
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 5,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSizes: {
      type: Array,
      default: () => [5, 10, 15, 20], // 如果默认值是引用类型，必须是函数形式（原因和data一致）
    },
  },
  data() {
    return {
      myCurrentPage: this.currentPage, // 初始值是props的currentPage
      myPageSize: this.pageSize, // 初始值是props的pageSize
    };
  },
  computed: {
    // 总页数
    totalPages() {
      return Math.ceil(this.total / this.myPageSize);
    },
    /**
     * 场景一 1 ...  3 4 [5] 6 7 ... 9
     *        start : currentPage - 2
     *        end : start + 4 (currentPage + 2)
     * 场景二 1 2 3 [4] 5 6 ... 9
     *        start 有最小值2
     *        start : 2
     *        end : start + 4
     * 场景三 1 ... 6 7 [8] 9 10 11
     *        end 有最大值 pageSize -1
     *        end : pageSize -1
     *        start : end - 4
     * 场景四 1 2 [3] 4 5
     *        1 2 [3] 4 5 6
     *        1 2 [3] 4 5 6 7
     * 不需要...
     *
     *        end 有最大值 pageSize -1
     *        end : pageSize -1
     *        start : end - 4
     * 场景五 [1]
     *        1 [2]
     * 不需要中间按钮
     *
     *
     */
    // 中间按钮的开头和结尾
    startEnd() {
      const { myCurrentPage, totalPages } = this;
      // 场景五
      // 目的 startEnd.end - startEnd.start + 1  = 0  不可以写在下面
      if (totalPages <= 2) {
        return {
          start: 1,
          end: 0,
        };
      }
      // 场景四
      // totalPages 小于等于 7
      if (totalPages <= 7) {
        return {
          start: 2,
          end: totalPages - 1,
        };
      }
      // totalPages 大于 7
      // 场景一
      let start = myCurrentPage - 2;
      // 场景二 start有最小值2
      if (start < 2) {
        start = 2;
      }
      let end = start + 4;

      // 场景三 end有最大值 totalPages - 1
      if (end > totalPages - 1) {
        end = totalPages - 1;
        start = end - 4;
      }

      return {
        start,
        end,
      };
    },
  },
  methods: {
    // 点击页码高亮
    goPage(newCurrentPage) {
      // this.currentPage = newCurrentPage // 1.props的属性是只读，不可以修改
      // 2.自定义事件 让父组件修改数据
      // this.$emit('current-change',newCurrentPage)
      // 3.定义组件自己的myCurrentPage 修改自己的
      this.myCurrentPage = newCurrentPage;
    },
    // 上一页
    prev() {
      this.myCurrentPage--;
    },
    // 下一页
    next() {
      this.myCurrentPage++;
    },
  },
  watch: {
    myPageSize(myPageSize) {
      const { totalPages, myCurrentPage } = this;
      // 当当前页码大于总页数时，要等于总页数
      if (myCurrentPage > totalPages) {
        this.myCurrentPage = totalPages;
      }
      this.$emit("size-change", myPageSize);
    },
    myCurrentPage(myCurrentPage) {
      this.$emit("current-change", myCurrentPage);
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  // height: 30px;
  // line-height: 30px;
  display: flex;
  align-items: center;
}
.pagination__btn {
  span {
    font-size: 22px;
  }
}
.pagination__pager {
  margin: 0 10px;
  display: flex;
  align-items: center;
}
.pagination__pager-number {
  text-align: center;
  margin-right: 10px;
}
.pagination__pager-number_last {
  margin-right: 0px;
}
.pagination__pager-number,
.pagination__btn {
  background-color: #eaeaea;
  color: #333;
  font-weight: 600;
  border-radius: 3px;

  width: 30px;
  height: 30px;
  line-height: 30px;
  border: none;
  // 伪类选择器
  &:disabled {
    color: #c0c4cc;
    cursor: not-allowed;
  }
}
.pagination__pagesize {
  margin: 0 10px;
  height: 30px;
  border-radius: 3px;
}
.pagination__total {
  font-size: 14px;
  font-weight: 600;
}
.active {
  background-color: red;
  color: #fff;
}
</style>
